<template>
  <div class="Index">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <div class="logo">
          <img src="../assets/logo.ec55f206.png" alt />
        </div>
        <div class="title">
          <h1>电商后台管理系统</h1>
        </div>
        <div class="logout">
          欢迎光临~
          <a @click="logout" href="JavaScript:;">登出</a>
        </div>
      </el-header>
      <el-container>
        <!-- 左侧栏 -->
        <el-aside width="200px">
          <el-menu
            :default-active="defaultActive"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            unique-opened
            active-text-color="#ffd04b"
            router
          >
            <el-submenu :index="menu.path" v-for="menu in menuList" :key="menu.id">
              <template v-slot:title>
                <i class="el-icon-location"></i>
                <span>{{ menu.authName }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item :index="item.path" v-for="item in menu.children" :key="item.id">
                  <i class="el-icon-menu"></i>
                  <span slot="title">{{ item.authName }}</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 主要部分 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      menuList: []
    }
  },
  async created () {
    // 通过async await 方式优化异步任务
    const { data, meta } = await this.$axios.get('menus')
    if (meta.status === 200) {
      this.menuList = data
    } else {
      this.$message.error(meta.msg)
    }
    // this.$axios.get('menus').then(res => {
    //   const { data, meta } = res
    //   // console.log(this.menuList)
    //   // console.log(this.$route.path)
    //   if (meta.status === 200) {
    //     this.menuList = data
    //   } else {
    //     this.$message.error(meta.msg)
    //   }
    // })

    // axios.post('http://localhost:8888/api/private/v1/login', this.form).then(res => {
    //   const { meta, data } = res.data
    //   if (meta.status === 200) {
    //     // console.log(res)
    //     localStorage.setItem('token', data.token)
    //     this.$message({
    //       message: meta.msg,
    //       type: 'success',
    //       duration: 1000
    //     })
    //     this.$router.push('/index')
    //   } else {
    //     // console.log(meta.msg)
    //     this.$message({
    //       message: meta.msg,
    //       type: 'error',
    //       duration: 1000
    //     })
    //   }
    // })
  },
  methods: {
    async logout () {
      // localStorage.removeItem('token')
      // this.$message({
      //   message: '亲你退出成功了',
      //   type: 'success',
      //   duration: 1000
      // })
      // this.$router.push('/login')
      try {
        await this.$confirm('亲 你要走了吗???', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        localStorage.removeItem('token')
        this.$message({
          type: 'success',
          message: '退出成功'
        })
        this.$router.push('/login')
      } catch (e) {
        console.log(e)
      }

      // this.$confirm('亲 你要走了吗???', '温馨提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // })
      //   .then(() => {
      //     localStorage.removeItem('token')
      //     this.$message({
      //       type: 'success',
      //       message: '退出成功'
      //     })
      //     this.$router.push('/login')
      //   })
      //   .catch(() => {})
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  },
  computed: {
    defaultActive () {
      // console.log(this.$route.path)
      return this.$route.path.slice(1).split('-')[0]
    }
  }
}
</script>

<style lang="scss" scoped>
.Index {
  height: 100%;
  .el-container {
    height: 100%;
    .el-header {
      background-color: #d8d8d8;
      display: flex;
      text-align: center;
      .logo {
        padding-top: 10px;
        width: 180px;
        img {
          height: 40px;
        }
      }
      .title {
        flex: 1;
        h1 {
          height: 60px;
          line-height: 60px;
          font-size: 24px;
          color: #545c64;
        }
      }
      .logout {
        text-align: right;
        height: 60px;
        line-height: 60px;
        width: 180px;
        font-weight: 700;
        a {
          color: orange;
        }
      }
    }
    .el-aside {
      background-color: #545c64;
      .el-menu {
        border-right: none;
      }
    }
    .el-main {
      background-color: #ecf0f1;
    }
  }
}
</style>
